* {
    margin: 0px;
    padding: 0px;
}

#content {
    width: 500px;
    height: 300px;
    margin: 10px auto;
    padding: 10px 0px 0px 10px;
    border: 1px solid blue;
    overflow: scroll;
}

.box {
    width: 300px;
    visibility: hidden; /* 外层隐藏 */
}

/* 当鼠标落在box上时，过渡取消隐藏 */
.box:hover {
    height: 100px;
    visibility: visible;
    transition: all 0.5s linear;
}

.box h2 {
    padding: 3px 0px 3px 2px;
    color: black;
    background-color: gray;
    border: 1px solid white;
    visibility: visible;   /*但是标题显示*/
}

.box p {
    background-color: rgb(231, 225, 225);
    height: 0px;   /* 消除占位 */
    /*段落继承box，也被隐藏*/
    visibility: inherit;
}
